<template>
	<div>
		<div class="nav-bar">
			<van-nav-bar title="用户登录"
									 left-arrow
									 left-text="首页"
									 right-text="注册"
									 @click-left="goBack"
									 @click-right="toRegister">
			</van-nav-bar>
		</div>
		<div class="register-panel">
			<van-cell-group>
				<van-field label="用户名"
									 label-width="3.2rem"
									 v-model="userName"
									 placeholder="请输入用户名"
									 required
									 clearable
									 clear-trigger="focus"
									 :error-message="userNameErrMsg"
									 @blur="checkUserName"></van-field>
				<van-field label="密码"
									 label-width="3.2rem"
									 v-model="password"
									 type="password"
									 placeholder="请输入密码"
									 required
									 :error-message="passwordErrMsg"
									 @blur="checkPassword"></van-field>
				<van-button size="large"
										round
										hairline
										plain
										@click="login"
										:loading="isLoading"
										:disabled="checked">登录</van-button>
			</van-cell-group>
		</div>
	</div>
</template>

<script>
import url from '@/serviceAPI.config.js'

export default {
	name: 'Login',
	data() {
		return {
			userName: '',
			password: '',
			isLoading: false,
			userNameErrMsg: '',
			passwordErrMsg: '',
			validUserName: false,
			validPassword: false
		}
	},
	methods: {
		goBack() {
			this.$router.push('/')
		},
		toRegister() {
			this.$router.push('/register')
		},
		login() {
			this.isLoading = true

			this.validUserName &&
				this.validPassword &&
				this.$axios({
					url: url.login,
					method: 'post',
					data: {
						userName: this.userName,
						password: this.password
					}
				})
					.then(value => {
						console.log(value)
						if (value.data.code === 200 && value.data.message) {
							return new Promise((resolve, reject) => {
								localStorage.userInfo = { userName: this.userName }
								setTimeout(() => {
									resolve()
								}, 500)
							})
								.then(() => {
									this.$toast.success('登录成功！')
									setTimeout(() => {
										this.$router.push('/')
									}, 1500)
								})
								.catch(error => {
									this.$toast.fail('登录状态保存失败！')
									console.log(error)
								})
						} else {
							console.log(value.data.message)
							this.$toast.fail('登录失败！')
							this.isLoading = false
						}
					})
					.catch(error => {
						console.log(error)
						this.$toast.fail('登录失败！')
						this.isLoading = false
					})
		},
		checkUserName(event) {
			const value = event.target.value

			if (value.length === 0 || value.length < 5 || value.length > 10) {
				this.userNameErrMsg = '请输入正确用户名！'
				this.validUserName = false
				return
			}

			this.userNameErrMsg = ''
			this.validUserName = true
		},
		checkPassword(event) {
			const value = event.target.value

			if (value.length === 0 || value.length < 6 || value.length > 14) {
				this.passwordErrMsg = '请输入正确密码！'
				this.validPassword = false
				return
			}

			this.passwordErrMsg = ''
			this.validPassword = true
		}
	},
	computed: {
		checked() {
			return !(this.validUserName && this.validPassword)
		}
	},
	created() {
		if (localStorage.userInfo) {
			this.$toast.success('登陆成功！')
			setTimeout(() => {
				this.$router.push('/')
			}, 1500)
		}
	}
}
</script>

<style lang="scss" scoped>
.nav-bar {
	box-shadow: 0 1.5px 1px #e61382;

	::v-deep .van-nav-bar__content {
		height: 2.2rem;
		line-height: 2.2rem;

		.van-nav-bar__title {
			color: #e61382;
			font-size: 1.1rem;
			font-weight: bold;
		}

		.van-nav-bar__text,
		.van-icon {
			font-size: 0.9rem;
			color: #e61382;
		}
	}
}

.register-panel {
	width: 86%;
	border-radius: 15px;
	margin: 60px auto 0;

	.van-cell-group {
		text-align: center;
	}

	.van-button {
		color: #e61382;
		border: 0.4px #e61382 solid;
		margin-top: 30px;
		width: 60%;
		height: 2.2rem;
	}
}
</style>
